import observerScript from "./observer";

(() => {  
  const config = {
    attributes: true,
    attributeFilter: ["class"],
    childList: true,
    subtree: true, 
  };

  new MutationObserver(observerScript(false)).observe(
    document.documentElement,
    config
  );

  observerScript();

  window.tailwindCSS = {
    refresh: observerScript(true),
    enableVariantGroups: () => {
      const els = Array.from(document.querySelectorAll('[class*=":("]'));
      if (els.length < 1) { return; }
      els.forEach(el => {
        const rawClass = el.getAttribute('class');
        const expanded = rawClass.replace(/((?:[\w-]+:)+)\(([^()]+)\)/g, (match, variants, innerContent) => {
          const variantList = variants.split(':').filter(Boolean);
          return innerContent.trim().split(/\s+/).map(item => {
            let important = '';
            let processedItem = item;
            if (processedItem.startsWith('!')) {
              important = '!';
              processedItem = processedItem.slice(1);
            }
            return `${variantList.join(':')}:${important}${processedItem}`;
          }).join(' ');
        });
        el.setAttribute('class', expanded);
      });
    },
    help: () => {
      console.log(`
        # Customize
        <script type="tailwind-config">{theme:{extend:{colors:{"test":{"50":"#0cf"}}}}</script>
        <style type="postcss">.custom-class{@apply border bg-gray-100 p-4}</style>
        
        # More Visit
        https://beyondco.de/blog/tailwind-jit-compiler-via-cdn
      `.replace(/ {8}/g,''));
    }
  }
})();